<template>
  <view class="smart-container">
    <text class="smart-panel-head-title">注册页</text>
    
    <view class="form">
      <input type="text" placeholder="请输入账号" class="input-item" />
      <input type="password" placeholder="请输入密码" class="input-item" />
      <button type="primary" @click="register" class="register-btn">注册</button>
    </view>

    <navigator url="/pages/login/login" class="link-btn">去登录</navigator>
    
    <navigator url="/pages/city-explore/city-explore" class="nav-btn" v-if="isRegistered">
      <button type="primary">进入城市探索</button>
    </navigator>

    <button class="to-component-btn" @click="jumpToComponentPage">
      跳转到组件页
    </button>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const isRegistered = ref(false);

const register = () => {
  isRegistered.value = true;
  uni.showToast({ 
    title: '注册成功', 
    icon: 'success',
    duration: 2000
  });
};

const jumpToComponentPage = () => {
  uni.navigateTo({
    url: '/pages/component-page/component-page'
  });
};
</script>

<style scoped>
.smart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 30rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.smart-panel-head-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 60rpx;
  color: #333;
}

.form {
  width: 100%;
  max-width: 500rpx;
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}

.input-item {
  width: 100%;
  padding: 22rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  background-color: #fff;
}

.register-btn {
  width: 100%;
  padding: 20rpx 0;
  font-size: 28rpx;
}

.link-btn {
  font-size: 26rpx;
  color: #007aff;
  margin: 20rpx 0;
  text-decoration: underline;
}

.nav-btn {
  width: 100%;
  max-width: 500rpx;
  margin-top: 10rpx;
}

.to-component-btn {
  margin-top: 30rpx;
  width: 100%;
  max-width: 500rpx;
  font-size: 28rpx;
}
</style>